
  <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>Archives: 2018 | Here. There.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
    
    <meta name="author" content="被删">
    
    <meta name="description" content="html5, js, angularjs, jQuery, 前端">
    
    
    
    
    <link rel="alternate" href="/atom.xml" title="Here. There." type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/pacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
    
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?3d902de4a19cf2bf179534ffd2dd7b7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</head>

    <body>
      <header>
        <div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/sun.png" alt="Here. There." title="Here. There."/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Here. There.">Here. There.</a></h1>
				<h2 class="blog-motto">Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
					
						<li><a href="/">首页</a></li>
					
						<li><a href="https://github.com/godbasin/godbasin.github.io">所有文章</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/categories">分类</a></li>
					
						<li><a href="/about">关于我</a></li>
					
				</ul>
			</nav>			
</div>

      </header>
      <div id="container">
        

<div class="archive-title" >
  <h2 class="archive-icon">2018</h2>
  
  <div class="archiveslist archive-float clearfix">
   <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">五月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">三月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">二月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/01/">一月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">十月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/09/">九月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/08/">八月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">七月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">六月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">五月 2018</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">三月 2018</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">十月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/07/">七月 2017</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">五月 2017</a><span class="archive-list-count">15</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">二月 2017</a><span class="archive-list-count">41</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">一月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">十二月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/11/">十一月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/10/">十月 2016</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/09/">九月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">八月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">七月 2016</a><span class="archive-list-count">14</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">六月 2016</a><span class="archive-list-count">9</span></li></ul>
 </div>
  
</div>
<div id="main" class="all-list-box clearfix"><!--class: archive-part-->
  <div id="archive-page" class=""><!--class: all-list-box-->

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/07/15/application-development-with-learning-database/" title="认识数据库" itemprop="url">
  
    <h1 itemprop="name">认识数据库</h1>
    
     
       <p itemprop="description" >《一步一步走向应用开发》用于记录在工作中的一些技能补全。什么技能？大概是前端所缺的很多的知识和技术吧。本节我们一起来了解下数据库。</p>
      
    
    <time datetime="2018-07-15T08:45:49.000Z" itemprop="datePublished">2018-07-15</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/07/07/build-application/" title="前端构建大型应用" itemprop="url">
  
    <h1 itemprop="name">前端构建大型应用</h1>
    
     
       <p itemprop="description" >与其说是构建大型应用，或许更多地是常用的应用构建吧。很多时候我们的项目在搭建的时候通常都不会定位为大型项目，但我们还是需要考虑到拓展性，或者说是在当项目开始变得较难维护的时候，要进行调整的一些方面。</p>
      
    
    <time datetime="2018-07-06T19:36:23.000Z" itemprop="datePublished">2018-07-07</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/06/17/component-communication-with-data-model/" title="数据抽离与数据管理" itemprop="url">
  
    <h1 itemprop="name">数据抽离与数据管理</h1>
    
     
       <p itemprop="description" >托目前主流框架的福，我们能从事件驱动脱离，来到了数据驱动的世界，可以参考以前的《前端思维转变–从事件驱动到数据驱动》。在常常与数据打交道后，我们对组件的封装、配置化的思想一步步地深入和拓展之后，对于数据和状态的管理，也慢慢地出现了一些思考。</p>
      
    
    <time datetime="2018-06-17T12:03:19.000Z" itemprop="datePublished">2018-06-17</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/06/09/component-with-configuration/" title="组件配置化" itemprop="url">
  
    <h1 itemprop="name">组件配置化</h1>
    
     
       <p itemprop="description" >配置化思想，其实可以在很多的地方使用。很多时候，我们在设计接口、应用、数据等情况下，配置化的方式可以允许我们获得更高的自由度。这里我们简单讲讲组件的配置化吧。</p>
      
    
    <time datetime="2018-06-09T09:59:18.000Z" itemprop="datePublished">2018-06-09</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/06/02/component-with-itself/" title="一个组件的自我修养" itemprop="url">
  
    <h1 itemprop="name">一个组件的自我修养</h1>
    
     
       <p itemprop="description" >曾经我在面试的时候，面试官问我，觉得做过的有意思的东西是什么，答组件相关的。结果被面试官鄙视了，sign~不过呢，再小的设计，当你把满腔热情和各种想法放进里面，它似乎有了灵魂。或许是我当时面试的表达，没有传达到真正的想法，那么在这里，我希望能很好地表达。</p>
      
    
    <time datetime="2018-06-02T03:07:40.000Z" itemprop="datePublished">2018-06-02</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/05/26/app-component-isolation/" title="页面区块化与应用组件化" itemprop="url">
  
    <h1 itemprop="name">页面区块化与应用组件化</h1>
    
     
       <p itemprop="description" >很多时候，我们喜欢划分所谓技术需求和业务需求。但其实，技术来自于业务，业务需要技术支撑，两者是分不开的。我们可以尝试在业务里，一样地写出花来。</p>
      
    
    <time datetime="2018-05-26T10:00:42.000Z" itemprop="datePublished">2018-05-26</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/05/19/front-end-8-http-and-ajax/" title="前端入门8--Ajax和http" itemprop="url">
  
    <h1 itemprop="name">前端入门8--Ajax和http</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。本节主要涉及 HTTP 协议和 Ajax 请求，日常开发的联调等内容。</p>
      
    
    <time datetime="2018-05-19T03:41:23.000Z" itemprop="datePublished">2018-05-19</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/05/13/front-end-7-debug/" title="前端入门7--代码调试" itemprop="url">
  
    <h1 itemprop="name">前端入门7--代码调试</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。前面讲了那么多基础性知识性的东西，本节我们来讲讲实战的一部分–代码调试。</p>
      
    
    <time datetime="2018-05-13T12:13:12.000Z" itemprop="datePublished">2018-05-13</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/05/08/front-end-6-browser-render/" title="前端入门6--认识浏览器" itemprop="url">
  
    <h1 itemprop="name">前端入门6--认识浏览器</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。本节我们从用户角度出发，认识浏览器的渲染机制吧。</p>
      
    
    <time datetime="2018-05-08T13:46:14.000Z" itemprop="datePublished">2018-05-08</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/05/05/front-end-5-javascript/" title="前端入门5--Javascript" itemprop="url">
  
    <h1 itemprop="name">前端入门5--Javascript</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。Javascript 包括三块：ECMAScript、DOM 和 BOM，本文主要介绍 ECMAScript。</p>
      
    
    <time datetime="2018-05-05T06:59:18.000Z" itemprop="datePublished">2018-05-05</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/04/29/front-end-4-dom-bom/" title="前端入门4--DOM和BOM" itemprop="url">
  
    <h1 itemprop="name">前端入门4--DOM和BOM</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。Javascript 包括三块：ECMAScript、DOM和BOM，本文主要介绍 DOM 和 BOM。</p>
      
    
    <time datetime="2018-04-29T06:06:40.000Z" itemprop="datePublished">2018-04-29</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/04/21/front-end-3-html-css/" title="前端入门3--HTML和CSS" itemprop="url">
  
    <h1 itemprop="name">前端入门3--HTML和CSS</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。本文稍微讲一下HTML和CSS。</p>
      
    
    <time datetime="2018-04-21T09:25:32.000Z" itemprop="datePublished">2018-04-21</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/04/14/front-end-2-front-end-page/" title="前端入门2--编写页面" itemprop="url">
  
    <h1 itemprop="name">前端入门2--编写页面</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。本文简单说明一下一个网页的结构，以及 HTML 和 CSS编写页面。</p>
      
    
    <time datetime="2018-04-14T08:22:15.000Z" itemprop="datePublished">2018-04-14</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/04/07/front-end-1-what-is-front-end/" title="前端入门1--什么是前端" itemprop="url">
  
    <h1 itemprop="name">前端入门1--什么是前端</h1>
    
     
       <p itemprop="description" >《前端入门》系列主要为个人对前端一些经验和认识总结。本文先整体介绍一下我所理解的前端状况。</p>
      
    
    <time datetime="2018-04-07T07:58:59.000Z" itemprop="datePublished">2018-04-07</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/31/vue2-transition-5-list-and-flip/" title="Vue2动画5--FLIP与列表过渡" itemprop="url">
  
    <h1 itemprop="name">Vue2动画5--FLIP与列表过渡</h1>
    
     
       <p itemprop="description" >最近在捣鼓 Vue 动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo 以及原理分析。本文讲述 Vue 中列表的过渡，以及介绍下 FLIP。</p>
      
    
    <time datetime="2018-03-31T12:27:57.000Z" itemprop="datePublished">2018-03-31</time>
  </a>
</section>


  <nav id="page-nav" class="clearfix archive-nav">
    <a class="extend prev" rel="prev" href="/archives/2018/">&laquo; Prev</a><a class="page-number" href="/archives/2018/">1</a><span class="page-number current">2</span><a class="page-number" href="/archives/2018/page/3/">3</a><a class="page-number" href="/archives/2018/page/4/">4</a><a class="extend next" rel="next" href="/archives/2018/page/3/">Next &raquo;</a>
  </nav>

  </div>
</div>

      </div>
      <footer><div id="footer" >
	
	<section class="info">
		<p> 即使梦想再小，却很伟大 ^_^ </p>
	</section>
	 
		<p class="copyright">Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/A-limon/pacman" target="_blank" title="Pacman">Pacman</a> © 2019 
		
		<a href="https://godbasin.github.io" target="_blank" title="被删">被删</a>
		
		</p>
</div>
</footer>
      <script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
        
    }
  });
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
});
</script>







    </body>
   </html>
